import React, { Component, useEffect, useState, useRef } from "react";
import { http } from "../../../api";
import { HashHistory } from "../../../utils";
import { Button, Radio } from "antd";

export default function Taotidetails() {
  const [taolist, setTaolist] = useState({});
  const [correct, setCorrect] = useState("");
  const allCorrect = useRef();
  useEffect(() => {
    http
      .gettaotiDetails({ _id: HashHistory.location.pathname.split("=")[1] })
      .then((res) => {
        // console.log(res, 1);
        if (res.data.code == 200) {
          setTaolist(res.data.val);
        }
      });
  }, []);
  const changeRadio = () => {};
  const gotoback = () => {
    HashHistory.go(-1);
  };
  const showtime = () => {
    var temp = [];
    taolist.subjects.map((item) => {
      temp.push(item.correct);
    });
    var str = temp.join("、");
    setCorrect(str);
    allCorrect.current.style.display = "block";
  };
  return (
    <div>
      <Button type="primary" onClick={gotoback}>
        返回
      </Button>
      {taolist && (
        <div>
          <h1 style={{ textAlign: "center", fontSize: "40px" }}>
            {taolist.title}
          </h1>
          {taolist.subjects &&
            taolist.subjects.map((item, i) => {
              return (
                <div key={i}>
                  <p>
                    {i + 1}、{item.subject}
                  </p>
                  <Radio.Group
                    onChange={changeRadio}
                    defaultValue="a"
                    style={{ height: 30 }}
                  >
                    {item.answer.map((item, i) => {
                      return (
                        <Radio value={item} key={i} style={{ marginRight: 30 }}>
                          {item}
                        </Radio>
                      );
                    })}
                  </Radio.Group>
                </div>
              );
            })}
          <div style={{ display: "flex" }}>
            <Button onClick={showtime} style={{ marginRight: 50 }}>
              正确答案
            </Button>
            {
              <p style={{ display: "none" }} ref={allCorrect}>
                <span style={{ marginRight: 10 }}>正确答案:</span>
                {correct}
              </p>
            }
          </div>
        </div>
      )}
    </div>
  );
}
